iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0

安裝相關程式 → 下載範本 → 列出功能清單 → 逐一實作

1. 安裝相關程式

VSCode:編輯器

Node.js

2. 下載範本

  • 下載範本並解壓縮:下載連結
  • 開啟 VSCode → File → Open Folder → 選擇範本所在的資料夾
    (首次開啟時,會跳出安裝插件提示)
  • 開啟 VSCode → Terminal → New Terminal
    1. 輸入 npm install (安裝相關套件,只需在首次開啟時執行)
    2. 輸入 npm run dev
  • 開啟瀏覽器 → 輸入網址 http://localhost:5173/

如此開發環境便設定完畢,只要在 VSCode 中修改程式碼,就會看到瀏覽器中的顯示內容也同步刷新。

  • HTML:index.html
  • CSS:style.css
  • JavaScript:main.js

3. 列出功能清單

把想做的 side project 功能列出,以 To Do List 為例:

  • 顯示待辦事項
  • 新增待辦事項
  • 標記為完成
  • 標記為未完成
  • 排序待辦事項
  • 搜尋待辦事項
  • 刪除待辦事項
  • 還原已刪除待辦事項
  • ...

4. 逐一實作

如果已經了解 HTML、CSS、JavaScript 的核心功能:

  • HTML:常用的元素(Element)與屬性(Attribute)
  • CSS:如何指定元素(Selector)與設定不同樣式
  • JavaScript:定義變數與函式、取得與操作 HTML 元素、綁定事件

再搭配文件邊做邊查,應足以實作出基本功能。

如果仍不知道從何下手,或是想做複雜一點的功能卡關了,下一篇文章會介紹幾個解決方法。


文章同步發表於部落格中


上一篇
8. side project 的題目怎麼選?
下一篇
10. 卡關了怎麼辦?
系列文
前端自學轉職攻略:30個常見問題30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言